<template>
  <div class="directors">
    <div class="appPc" v-if="$store.state.screenWidth > 1300">
      <div class="backdrop">
        <img
          src="https://ir3.anbio.xyz/uploads/image/6528681748657426.jpg"
          alt=""
        />
        <h1 class="title">Directors</h1>
      </div>

      <div class="block">
        <div
          class="list"
          v-for="(item, index) in list"
          :key="index"
          @click="directiorsHit(item, index)"
        >
          <div class="img">
            <img :src="item.img" alt="" />
          </div>
          <div class="name">{{ item.title }}</div>
          <div class="text">{{ item.text }}</div>
          <div class="more">
            Read More
            <img src="../../assets/right.png" alt="" />
          </div>
        </div>
      </div>

      <div class="dislog">
        <!--弹出框-->
        <el-dialog
          :visible.sync="directiorsShow"
          width="60%"
          :before-close="directiorsClose"
        >
          <div class="dislog-popup">
            <h5 class="header">{{ listObj.title }}</h5>
            <h5 class="title">{{ listObj.text }}</h5>
            <div class="text">
              <p>
                {{ listObj.popup }}
              </p>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>

    <div class="appH5" v-else>
      <div class="popup-lint"></div>

      <div class="backdrop">
        <img
          src="https://ir3.anbio.xyz/uploads/image/6528681748657426.jpg"
          alt=""
        />
        <h1 class="title">Directors</h1>
      </div>

      <div class="block">
        <div
          class="list"
          v-for="(item, index) in list"
          :key="index"
          @click="directiorsHit(item, index)"
        >
          <div class="img">
            <img :src="item.img" alt="" />
          </div>
          <div class="name">{{ item.title }}</div>
          <div class="text">{{ item.text }}</div>
          <div class="more">
            Read More
            <img src="../../assets/right.png" alt="" />
          </div>
        </div>
      </div>

      <div class="dislog">
        <!--弹出框-->
        <el-dialog
          :visible.sync="directiorsShow"
          width="95%"
          :before-close="directiorsClose"
        >
          <div class="dislog-popup">
            <h5 class="header">{{ listObj.title }}</h5>
            <h5 class="title">{{ listObj.text }}</h5>
            <div class="text">
              <p>
                {{ listObj.popup }}
              </p>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      directiorsShow: false,

      list: [
        {
          title: "Yingkai Xu",
          text: "Chairman of the Board and Director",
          img: require("../../assets/common/0.png"),
          popup: `Mr. Xu has served as our Director, Chairman of the Board. From September 1999 to September 2002, Mr. Xu worked as a quality engineer and process engineer at the Wuxi Diesel Engine Plant of FAW Group Co., Ltd., where he performed engine component failure analysis and treatment and casting process design. From October 2002 to February 2006, Mr. Xu acted as a supplier quality engineer, product development engineer, and project manager at Tin Cummins Turbocharger Technology Co., where he performed supplier, new product project development, and general management. From March 2006 to May 2013, Mr. Xu worked as the vice president at Wuxi Yelong Precision Machinery Co., responsible for the company’s overall operation. From June 2013 to September 2015, Mr. Xu was the General Manager of Wuxi Ruiming Mould Manufacturing Factory, in charge of the general operations. Since October 2015, Mr. Xu has served as the General Manager of Wuxi Mingteng Mould, in charge of overall company operations, critical customer maintenance, financial reporting, and annual business plans. Mr. Xu obtained his bachelor’s degree from the School of Materials Science and Engineering at Jilin University of Technology in July 1999.`,
        },
        {
          title: "Jingzhu Ding",
          text: "Director",
          img: require("../../assets/common/1.png"),
          popup: `Ms. Ding has served as our Director since November 9, 2023. Ms. Ding has been the Finance Director at Wuxi Mingteng Mould since August 2018, where she oversees the Wuxi Mingteng Mould’s comprehensive financial accounting, develops and implements financial regulations and procedures, interprets related regulations, analyzes financial transactions, and monitors budget execution. Her responsibilities also include auditing original documents, managing daily accounting tasks, reviewing payroll and bonus distribution, ensuring the accuracy of cash and bank deposits, conducting periodic warehouse inventory checks, controlling fund budgets, and auditing accounts payable and expense reimbursements. Ms. Ding obtained her college degree in Software Development and Utilization from Wuxi Radio and Television University in June 2005.`,
        },
        {
          title: "Ronghua Xu",
          text: "Independent Director and Chair of Audit Committee",
          img: require("../../assets/common/2.png"),
          popup: `Ms. Xu is our independent director. Ms. Xu has experience in accounting for over 15 years. From June 2007 until now, she serves as the Finance Director in Wuxi Jinke Real Estate Development Co., Ltd., a subsidiary of Jinke Property Group Co.,Ltd which is listed on the Shenzhen Stock Exchange (ticker: 000656), during which she is in charge of financial accounting and fund management. She has played an important role in the financial statement analysis for public listed companies, internal control management, M&A planning, financing management, tax planning and budget management. Ms. Xu graduated from Nankai University with a bachelor’s degree in business administration in 2003. She obtained certificates of Certified Public Accountant (CPA) in 2009 and Certified Tax Agents (CTA) in 2013. We believe that Ms. Xu is qualified to serve on our board by reasons of professional experiences and qualifications.`,
        },
        {
          title: "Weikai Fang",
          text: "Independent Director and Chair of Compensation Committee",
          img: require("../../assets/common/3.png"),
          popup: `Ms. Xu is our independent director. Ms. Xu has experience in accounting for over 15 years. From June 2007 until now, she serves as the Finance Director in Wuxi Jinke Real Estate Development Co., Ltd., a subsidiary of Jinke Property Group Co.,Ltd which is listed on the Shenzhen Stock Exchange (ticker: 000656), during which she is in charge of financial accounting and fund management. She has played an important role in the financial statement analysis for public listed companies, internal control management, M&A planning, financing management, tax planning and budget management. Ms. Xu graduated from Nankai University with a bachelor’s degree in business administration in 2003. She obtained certificates of Certified Public Accountant (CPA) in 2009 and Certified Tax Agents (CTA) in 2013. We believe that Ms. Xu is qualified to serve on our board by reasons of professional experiences and qualifications.`,
        },
        {
          title: "Xiaoqiu Zhang",
          text: "Independent Director and Chair of Nominating and Corporate Governance Committee",
          img: require("../../assets/common/4.png"),
          popup: `Ms. Zhang is our independent director. Ms. Zhang has over 10 years of business success, with a highly diverse knowledge of operations management and corporate governance. From March 2016 until now, she has founded Wuxi Xinzhan Enterprise Management Consulting Co., Ltd., a company that engages in production, R&D and sales of beauty and skin care products. She serves as the General Manager and is responsible for operation management and strategic planning. From June 2015 to June 2018, Ms. Zhang also served as the director of Wuxi Dongling Intelligent Technology Co., Ltd., a service provider of intelligent production system solutions in the manufacturing industry, during which she assisted the company in successfully listing on the New Third Board in PRC. From September 2005 to May 2015, Ms. Zhang served in a cosmetic trading company, Wuxi Jiazi Health Management Consulting Co., Ltd., and was in charge of market operation. Ms. Zhang graduated from Nanjing Political College with a college degree in 2005 and Northeast University of Finance and Economics with a bachelor’s degree in business administration in October 2020. In addition, Ms. Zhang completed the senior general manager class at China Europe International Business School in October 2020. We believe that Ms. Zhang is qualified to serve on our board by reasons of professional experiences and qualifications.`,
        },
      ],
      listObj: {},
    };
  },
  created() {
    this.scrollTotap();
  },
  methods: {
    directiorsHit(item, index) {
      this.listObj = item;
      this.directiorsShow = true;
    },
    scrollTotap() {
      window.scrollTo(0, 0);
    },

    //-------
    directiorsClose() {
      this.directiorsShow = false;
    },
  },
};
</script>


<style lang="less" scoped>
.directors {
  .appPc {
    background: #eef4fc;

    .backdrop {
      height: 205px;
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
      }

      .title {
        letter-spacing: 1.5px;
        color: #fff;
        position: relative;
        font-size: 48px;
        font-weight: bold;
      }
    }

    .block {
      padding: 90px 20px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      max-width: 1500px;
      margin: 0 auto;

      .list {
        width: calc((100% / 3) - 20px);
        margin-right: 30px;
        margin-bottom: 30px;
        padding: 30px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 20px;
        cursor: pointer;
        box-shadow: 0 4px 24px rgba(89, 95, 102, 0.25);
        transition: transform 0.2s, 0.2s;

        .img {
          width: 270px;
          height: 270px;
          margin: 0 auto;
          border-radius: 50%;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .name {
          text-align: center;
          font-size: 30px;
          margin-top: 20px;
          color: #276cd3;
        }

        .text {
          font-size: 18px;
          margin-top: 15px;
          text-align: center;
          height: 70px;
        }

        .more {
          font-weight: 600;
          font-size: 20px;
          color: #97daf7;
          text-align: center;
          color: #276cd3;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 30px;
            height: 30px;
            margin-left: 10px;
          }
        }
      }

      .list:nth-child(3n + 3) {
        margin-right: 0;
      }

      .list:hover {
        transform: scale(1.01);
      }
    }

    .dislog {
      /deep/ .el-dialog__body {
        padding: 0;
      }

      /deep/ .el-dialog__header {
        padding: 0;
      }

      .dislog-popup {
        padding: 30px;
        box-sizing: border-box;
        background: #fff;

        .header {
          display: flex;
          align-items: center;
          border-bottom: 1px solid #eef4fc;
          font-weight: 600;
          font-size: 28px;
          margin-top: 0;
          margin-bottom: 20px;
          padding-bottom: 20px;
        }

        .title {
          font-size: 24px;
          font-weight: 600;
          margin-top: 0;
          margin-bottom: 20px;
        }

        .text {
          font-weight: 500;

          p {
            font-size: 18px;
            line-height: 25px;
          }
        }
      }
    }
  }

  .appH5 {
    background: #eef4fc;

    .backdrop {
      height: 200px;
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
      }

      .title {
        letter-spacing: 1.5px;
        color: #fff;
        position: relative;
        font-size: 24px;
        font-weight: bold;
      }
    }

    .block {
      padding: 20px;
      box-sizing: border-box;
      .list {
        width: 100%;
        padding: 30px;
        box-sizing: border-box;
        margin-bottom: 30px;
        border-radius: 20px;
        background: #fff;

        .img {
          width: 170px;
          height: 170px;
          margin: 0 auto;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .name {
          text-align: center;
          font-size: 30px;
          margin-top: 20px;
          color: #276cd3;
        }

        .text {
          font-size: 18px;
          margin-top: 15px;
          text-align: center;
          height: 70px;
        }

        .more {
          font-weight: 600;
          font-size: 20px;
          color: #97daf7;
          text-align: center;
          color: #276cd3;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 30px;
            height: 30px;
            margin-left: 10px;
          }
        }
      }
    }

    .dislog {
      /deep/ .el-dialog__body {
        padding: 0;
      }

      /deep/ .el-dialog__header {
        padding: 0;
      }

      /deep/ .el-dialog__headerbtn {
        font-size: 7rem;
      }

      .dislog-popup {
        padding: 20px 10px;
        box-sizing: border-box;
        background: #fff;

        .header {
          display: flex;
          align-items: center;
          border-bottom: 1px solid #eef4fc;
          font-weight: 600;
          font-size: 22px;
          margin-top: 0;
          margin-bottom: 10px;
          padding-bottom: 10px;
        }

        .title {
          font-size:18px;
          font-weight: 600;
          margin-top: 0;
          margin-bottom: 10px;
        }

        .text {
          font-weight: 500;

          p {
            font-size: 16px;
            line-height: 25px;
          }
        }
      }
    }
  }
}
</style>